@use '../core' as *;
@use 'sass:map';

a#{$selector-exclude-grid} {
    text-decoration: none;
    color: var(--color-link);
    transition: color $transition-default-timing;
    font-weight: var(--text-semibold);

    &:hover {
        color: var(--color-link-hover);
    }

    > .icon {
        --icon-size: 1.5em;
        --color-icon: var(--color-link);
    }

    &:hover > .icon {
        --color-icon: var(--color-link-hover);
    }
}

code#{$selector-exclude-grid} {
    font-size: var(--text-fs-sm);
    padding: 3px;
    font-family: var(--text-monospace-font-family);
    white-space: normal;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-code);
    color: var(--color-fg-primary);
    border: 1px solid rgba(black, 0.1);

    #{$selector-darkmode} & {
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--color-fg-primary);
        background-color: var(--color-bg-secondary);
    }
}

kbd#{$selector-exclude-grid} {
    display: inline-block;
    margin: 0.1em 0.1em;
    padding: 0.1em 0.6em 0.15em;
    font-size: var(--text-fs-sm);
    font-family: var(--text-font-family);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: inset 0 -2px 0 var(--color-util-gray-200);

    #{$selector-darkmode} & {
        color: var(--color-fg-primary);
        background-color: var(--color-bg-secondary);
        text-shadow: -1px -1px var(--color-util-gray-50);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 -2px 0 var(--color-util-gray-50);
        font-weight: 500;
    }
}

img#{$selector-exclude-grid},
svg#{$selector-exclude-grid} {
    vertical-align: middle;
}

svg#{$selector-exclude-grid} {
    overflow: hidden;
}
